<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>修改个人信息</title>

<meta name="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="${path }/static/uploadPreview.js"></script>
<script src="${path }/static/uploadPreview.min.js"></script>
<script type="text/javascript">
window.onload = function () { 
    new uploadPreview({ UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow" });
}
	  $(document).ready(function(){
		  
	   var nickNameValidate=false;passWordValidate=false,repassWordValidate=false;emailValidate=false;
	   var isValidate=false;
	   var isNotExsit=false;
	   var isEmailExist=false;
	   
	   $("#nickName").blur(function(){
		   var val=$(this).val();
		   $.ajaxSetup({async: false});
			/* JQuery 发起get请求 */
			$.get("user/isNickNameexsit",{nickname:val},function(data,status){
				//得到返回数据
				var dataObj = eval(data);
				var flag = dataObj.flag;
				//alert("flag="+flag);
				if (flag==0) {
					isNotExsit=true;
				}else{
					isNotExsit=false;
				}
			});
		   var reg=/[a-zA-Z0-9]{3,16}/;
		   if(isNullOrBlankOrUD(val)){
			  $("#nickName_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;">昵称不能为空</span>');
              nickNameValidate=false;
		   }else if(!reg.test(val)){
			   $("#nickName_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;">输入格式不对</span>');
			    nickNameValidate=false;
		   }else if(isNotExsit){
			   $("#nickName_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;">该昵称已被使用</span>');
			    nickNameValidate=false;
		   }else{
              $("#nickName_info").html('<span class="glyphicon glyphicon-ok"></span>');
			 /*  $("#nickName_info span").remove(); */
              nickNameValidate=true;
		   }
		   
	   });

       	$("#password").blur(function(){
				var val = $(this).val();
				var reg = /[a-zA-z0-9]{6,25}/;
				if(isNullOrBlankOrUD(val)){
					$("#password_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 登录密码为必填项</span>');
					passwordValidate = false;
				}else if(!reg.test(val)){
					$("#password_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 必须由6-25位的字母或数字组成</span>');
					passwordValidate = false;
				}else{
					$("#password_info").html('<span class="glyphicon glyphicon-ok"></span>');
					passwordValidate = true;
				}
			});
			$("#repassword").blur(function(){
				var val = $(this).val();
				var password = $("#password").val();
				var reg = /[a-zA-z0-9]{6,25}/;
				if(isNullOrBlankOrUD(val)){
					$("#repassword_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 重复密码为必填项</span>');
					repasswordValidate = false;
				}else if(!reg.test(val)){
					$("#repassword_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 必须由6-25位的字母或数字组成</span>');
					repasswordValidate = false;
				}else if(val != password){
					$("#repassword_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 重复密码必须与登录密码一致</span>');
					repasswordValidate = false;
				}else{
					$("#repassword_info").html('<span class="glyphicon glyphicon-ok"></span>');
					repasswordValidate = true;
				}
			});
			$("#email").blur(function(){
				var val = $(this).val();
				var password = $("#email").val();
				var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
				
			 	/* JQuery 设置请求为同步 */
    			$.ajaxSetup({async: false});
    			/* JQuery 发起get请求 */
    			$.get("<c:url value="/user/isEmailExist"/>",{email:val},function(data,status){
    				if(data.flag == 1){
    					isEmailExist = true;
    				}else{
    					isEmailExist = false;
    				}
    			});
				
				if(isNullOrBlankOrUD(val)){
					$("#email_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 邮箱必填项</span>');
					emailValidate = false;
				}else if(!reg.test(val)){
					$("#email_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 邮箱格式错误</span>');
					emailValidate = false;
				}else if(isEmailExist){
					$("#email_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 邮箱已被使用</span>');
					emailValidate = false;
				}else{
					emailValidate = true;
					$("#email_info").html('<span class="glyphicon glyphicon-ok"></span><span style="color: red;"></span>');
				}
			});
         
		 $("#update_form").submit(function(){
				isValidate = passwordValidate&&repasswordValidate&&nickNameValidate&&emailValidate;
				return isValidate;
			});


   });
   
    function isNullOrBlankOrUD(value){
		   if(value=="" ||value==null ||value==undefined){
			  return true;
		   }else{
			  return false;
		   }
	   
      }
   
    </script>
</head>

<body>
	<%-- <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="<c:url value="/index"></c:url>">Zking
					BBS</a>
			</div>
			<div class="navbar-right" style="margin-right: 50px">
				<c:if test="${not empty user}">
					<h4>
						<a href="<c:url value="/personal"/>">${user.nickname} <c:if
								test="${user.status==0 }">(未激活)</c:if>
						</a> <a href="<c:url value="/user/logout"></c:url>"
							class="btn btn-sm btn-warning">退出</a>
					</h4>
					<!-- <button class="btn  btn-primary " type="button" id="login_btn" style="margin-left: 20px;margin-bottom: 10px" onclick="center();">个人中心</button> -->
				</c:if>
				<c:if test="${ empty user}">
					<button class="btn  btn-primary " type="button" id="login_btn"
						style="margin-bottom: 10px" onclick="login();">登录</button>
					<button class="btn  btn-primary " type="button" id="login_btn"
						style="margin-left: 20px; margin-bottom: 10px"
						onclick="register();">注册</button>
				</c:if>
			</div>
		</div>
	</nav> --%>
	<jsp:include page="/head"></jsp:include>
	<div class="panel panel-info"
		style="width: 1000px; margin-left: 200px; margin-top: 52px; height: 500px">
		<div class="panel-heading" style="height: 50px">
			<h2 class="panel-title pull-left" style="margin-top: 10px">修改头像</h2>
			<div class="pull-right">
				<!-- <button class="btn  btn-primary " type="button" id="login_btn">返回</button> -->
				<a href="<c:url value="/personal/person"/>" class="btn  btn-primary">个人中心</a>
			</div>
		</div>

		<div class="panel-body">
			<table class="table table-responsive">
				<thead>
					<tr>
						<th style="width: 200px"></th>
						<th width="600px"></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<div style="width: 100px; height: 100px; margin-top:20px;" >
							<c:if test="${not empty sessionScope.user.img }">
								<img src="${sessionScope.user.img }" width="100" height="100">
								</c:if>
								<c:if test="${ empty sessionScope.user.img }">
								<img src="${path }/static/images/weishch.png" width="100" height="100"></c:if>
							</div>
							<h4 id="nickname">昵称：${ sessionScope.user.username}</h4>
						</td>
						<td id="content">
							<%-- <form class="form-horizontal" role="form" action="<c:url value="/user/person"/>"
								style="margin-top: 60px" ; method="post" id="update_form">
								<div class="form-group">
									<label class="col-sm-2 control-label" for="nickname">用户昵称</label>
									<div class="col-sm-3">
										<input id="nickName" type="text" name="nickname"
											placeholder="请输入昵称" class="form-control"
											autofocus="autofocus" />
									</div>
									<span id="nickName_info"><span
										class="glyphicon glyphicon-user"></span><span
										class=" info_text"> 必填，由3-16位的字母或数字组成</span></span>
								</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label" for="password">新密码</label>

									<div class="col-sm-3">
										<input id="password" type="password" name="password"
											placeholder="请输入新的密码" class="form-control" />
									</div>
									<span id="password_info"><span
										class="glyphicon glyphicon-lock"></span><span
										class=" info_text"> 必填，由6-25位的字母或数字组成</span></span>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label" for="repassword">确认密码</label>

									<div class="col-sm-3">
										<input id="repassword" type="password" name="repassword"
											placeholder="请输入确认密码" class="form-control" />
									</div>
									<span id="repassword_info"><span
										class="glyphicon glyphicon-lock"></span><span
										class=" info_text"> 必填，由6-25位的字母或数字组成</span></span>
								</div>
				<div class="form-group">
				   <label class="col-sm-2 control-label" for="email">邮箱账号</label>
				   <div class="col-sm-3">
				      <input id="email" type="email" name="email" placeholder="请输入邮箱号"
					  class="form-control"/>
				   </div> 
				   <span id="email_info"><span class="glyphicon glyphicon-lock"></span><span class="info_text">  必填，请输入正确的邮箱号</span></span>
				</div>
								<div class="form-group">
									<div class="col-sm-offset-2 col-sm-10">
										<button type="submit" class="btn btn-primary">提交</button>
										<button type="reset" class="btn btn-primary"
											style="margin-left: 60px">重置</button>
									</div>
								</div>
							</form> --%>
							<span style="color: red;">图片大小不超过2M,尺寸最好100*100为宜,支持jpg、png、gif格式</span>
							 <form method="post" action="${path}/personal/update"
		enctype="multipart/form-data">
							 <div id="imgdiv">
							 <c:if test="${not empty sessionScope.user.img }">
								<img id="imgShow" src="${sessionScope.user.img }"width="100" height="100">
								</c:if>
								<c:if test="${ empty sessionScope.user.img }">
								<img id="imgShow" src="${path }/static/images/weishch.png" width="100" height="100"></c:if>
							 </div>
    <input type="file" name="file" id="up_img" style="margin-top: 10px"/>
    <div class="col-sm-offset-2 col-sm-10">
    <span style="color: red;">${msg }</span>
										<button type="submit" class="btn btn-primary">提交</button>
										</div>
										</form>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	
</body>
</html>
